const utils = require('./utils')

function loader(source) {
  // 拿出 template 和 style 的内容
  const template = utils.exec(/<template>([\s\S]*)<\/template>/, source)
  const style = utils.exec(/(<style>[\s\S]*<\/style>)/, source)
  // 去掉 template 和 style 的标签和内容 和 script 标签
  source = source.replace(/<template>[\s\S]*<\/template>/g, '').replace(/<style>[\s\S]*<\/style>/g, '').replace(/<[\/]?script>/g, '')

  // 注入 template 和 style
  // 先判断是否存在构造器，若存在，则修改super方法，否则直接添加默认构造器
  if(source.match(/constructor\s*\(.*?\)/)) {
    source = source.replace(/super\s?\(.*?\)/, (item)=>{
      return `
          const templateStr = \`${template}\`
          const styleStr = \`${style}\`
          super(templateStr, styleStr)
          this.templateStr = templateStr
          this.styleStr = styleStr
      `
    })
  }else {
    source = source.replace(/class\s(\w+)[\s\S]*?\{/, (item)=>{
      return item + `
        constructor() {
          const templateStr = \`${template}\`
          const styleStr = \`${style}\`
          super(templateStr, styleStr)
          this.templateStr = templateStr
          this.styleStr = styleStr
        }
      `
    })
  }


  // 获取标签名
  const className = utils.exec(/class\s(\w+)[\s\S]*?\{/, source)
  const _className = 'wc-' + utils.camelToDash(className)

  // 注册标签
  source += `
    ${className}.componentsName = '${_className}';
    if(!${className}.hasDefine) {customElements.define('${_className}', ${className})};
  `
  return source
}

module.exports = loader

